loginDialog: consolidate message label and login hint label

Right now the login hint is showing up just above the the cancel
button, instead of just below the text entry field.

The mockup here:

https://raw.github.com/gnome-design-team/gnome-mockups/master/system-lock-login-boot/login-dissect.png

Says it should share a label with the PAM info/error messages.

This commit consolidates the two labels.

https://bugzilla.gnome.org/show_bug.cgi?id=706324

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 221bcc939f14f9126064419502c9f317e9288e6d..4c905bdc9dde8caff88ebbbf88242a78731b2726 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -2281,10 +2281,6 @@ StScrollBar StButton#vhandle:active {
     spacing: 5px;
 }
 
-.login-dialog-prompt-login-hint-message {
-    font-size: 10.5pt;
-}
-
 .login-dialog-user-list-view {
     -st-vfade-offset: 1em;
 }
@@ -2453,10 +2449,22 @@ StScrollBar StButton#vhandle:active {
     background-color: rgba(102, 102, 102, 0.15);
 }
 
+.login-dialog-message-warning,
+.login-dialog-message-info {
+    padding-top: 4px;
+    padding-bottom: 16px;
+    min-height: 2em;
+}
+
 .login-dialog-message-warning {
     color: orange;
 }
 
+.login-dialog-message-hint {
+    padding-bottom: 16px;
+    min-height: 2em;
+}
+
 .user-widget-label {
     font-size: 16pt;
     font-weight: bold;

diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index e3d0ab9d7925ea3e87b1517b60d8c3c7839eebb2..6c26350d00df97b1f02e3180c2dd9bceeea1a686 100644 (file)
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -36,6 +36,8 @@ const BeginRequestType = {
     DONT_PROVIDE_USERNAME: 1
 };
 
+let _messageStyleMap;
+
 const AuthPrompt = new Lang.Class({
     Name: 'AuthPrompt',
 
@@ -58,8 +60,6 @@ const AuthPrompt = new Lang.Class({
         this._userVerifier.connect('verification-failed', Lang.bind(this, this._onVerificationFailed));
         this._userVerifier.connect('verification-complete', Lang.bind(this, this._onVerificationComplete));
         this._userVerifier.connect('reset', Lang.bind(this, this._onReset));
-        this._userVerifier.connect('show-login-hint', Lang.bind(this, this._onShowLoginHint));
-        this._userVerifier.connect('hide-login-hint', Lang.bind(this, this._onHideLoginHint));
         this._userVerifier.connect('smartcard-status-changed', Lang.bind(this, this._onSmartcardStatusChanged));
         this.smartcardDetected = this._userVerifier.smartcardDetected;
 
@@ -111,10 +111,7 @@ const AuthPrompt = new Lang.Class({
 
         this._message = new St.Label({ opacity: 0 });
         this._message.clutter_text.line_wrap = true;
-        this.actor.add(this._message, { x_fill: true });
-
-        this._loginHint = new St.Label({ style_class: 'login-dialog-prompt-login-hint-message' });
-        this.actor.add(this._loginHint);
+        this.actor.add(this._message, { x_fill: true, y_align: St.Align.START });
 
         this._buttonBox = new St.BoxLayout({ style_class: 'login-dialog-button-box',
                                              vertical: false });
@@ -242,8 +239,8 @@ const AuthPrompt = new Lang.Class({
             this.reset();
     },
 
-    _onShowMessage: function(userVerifier, message, styleClass) {
-        this.setMessage(message, styleClass);
+    _onShowMessage: function(userVerifier, message, type) {
+        this.setMessage(message, type);
         this.emit('prompted');
     },
 
@@ -266,14 +263,6 @@ const AuthPrompt = new Lang.Class({
         }
     },
 
-    _onShowLoginHint: function(verifier, message) {
-        this.setHint(message);
-    },
-
-    _onHideLoginHint: function() {
-        this.setHint(null);
-    },
-
     addActorToDefaultButtonWell: function(actor) {
         this._defaultButtonWell.add_child(actor);
 
@@ -359,9 +348,6 @@ const AuthPrompt = new Lang.Class({
         this._label.show();
         this._entry.show();
 
-        this._loginHint.opacity = 0;
-        this._loginHint.show();
-
         this._entry.grab_key_focus();
     },
 
@@ -389,13 +375,27 @@ const AuthPrompt = new Lang.Class({
                          });
     },
 
-    setMessage: function(message, styleClass) {
+    _initMessageStyleMap: function() {
+        if (_messageStyleMap)
+            return;
+
+        _messageStyleMap = {};
+        _messageStyleMap[GdmUtil.MessageType.NONE] = '';
+        _messageStyleMap[GdmUtil.MessageType.ERROR] = 'login-dialog-message-warning';
+        _messageStyleMap[GdmUtil.MessageType.INFO] = 'login-dialog-message-info';
+        _messageStyleMap[GdmUtil.MessageType.HINT] = 'login-dialog-message-hint';
+
+    },
+
+    setMessage: function(message, type) {
+        this._initMessageStyleMap();
         if (message) {
             Tweener.removeTweens(this._message);
             this._message.text = message;
-            this._message.styleClass = styleClass;
+            this._message.styleClass = _messageStyleMap[type];
             this._message.opacity = 255;
         } else {
+            this._message.styleClass = null;
             this._message.opacity = 0;
         }
     },
@@ -414,7 +414,7 @@ const AuthPrompt = new Lang.Class({
     hide: function() {
         this.setActorInDefaultButtonWell(null, true);
         this.actor.hide();
-        this._loginHint.opacity = 0;
+        this._message.opacity = 0;
 
         this.setUser(null);
 
@@ -431,16 +431,6 @@ const AuthPrompt = new Lang.Class({
         }
     },
 
-    setHint: function(message) {
-        if (message) {
-            this._loginHint.set_text(message)
-            this._loginHint.opacity = 255;
-        } else {
-            this._loginHint.opacity = 0;
-            this._loginHint.set_text('');
-        }
-    },
-
     reset: function() {
         let oldStatus = this.verificationStatus;
         this.verificationStatus = AuthPromptStatus.NOT_VERIFYING;
@@ -453,7 +443,6 @@ const AuthPrompt = new Lang.Class({
         this._message.opacity = 0;
         this.setUser(null);
         this.stopSpinning();
-        this.setHint(null);
 
         if (oldStatus == AuthPromptStatus.VERIFICATION_FAILED)
             this.emit('failed');

diff --git a/js/gdm/loginDialog.js b/js/gdm/loginDialog.js
index b01ea3772010c01c625afc111d512d582bcd2835..0cec9df8343c8e0c3cf30551dbca426dc5d878d8 100644 (file)
--- a/js/gdm/loginDialog.js
+++ b/js/gdm/loginDialog.js
@@ -638,7 +638,7 @@ const LoginDialog = new Lang.Class({
 
         // Translators: this message is shown below the username entry field
         // to clue the user in on how to login to the local network realm
-        this._authPrompt.setHint(_("(e.g., user or %s)").format(hint));
+        this._authPrompt.setMessage(_("(e.g., user or %s)").format(hint), AuthPrompt.MessageType.HINT);
     },
 
     _askForUsernameAndBeginVerification: function() {

diff --git a/js/gdm/util.js b/js/gdm/util.js
index 7ed50979b19970b6220aa3215e84ca947fa78f18..bfbd1b37d1d936dc874581f0561e5f55d436e115 100644 (file)
--- a/js/gdm/util.js
+++ b/js/gdm/util.js
@@ -36,6 +36,13 @@ const DISABLE_USER_LIST_KEY = 'disable-user-list';
 // Give user 16ms to read each character of a PAM message
 const USER_READ_TIME = 16
 
+const MessageType = {
+    NONE: 0,
+    ERROR: 1,
+    INFO: 2,
+    HINT: 3
+};
+
 function fadeInActor(actor) {
     if (actor.opacity == 255 && actor.visible)
         return null;
@@ -225,7 +232,8 @@ const ShellUserVerifier = new Lang.Class({
             return;
 
         let message = this._messageQueue.shift();
-        this.emit('show-message', message.text, message.iconName);
+
+        this.emit('show-message', message.text, message.type);
 
         this._messageQueueTimeoutId = GLib.timeout_add(GLib.PRIORITY_DEFAULT,
                                                        message.interval,
@@ -235,11 +243,11 @@ const ShellUserVerifier = new Lang.Class({
                                                        }));
     },
 
-    _queueMessage: function(message, iconName) {
+    _queueMessage: function(message, messageType) {
         let interval = this._getIntervalForMessage(message);
 
         this.hasPendingMessages = true;
-        this._messageQueue.push({ text: message, interval: interval, iconName: iconName });
+        this._messageQueue.push({ text: message, type: messageType, interval: interval });
         this._queueMessageTimeout();
     },
 
@@ -250,7 +258,7 @@ const ShellUserVerifier = new Lang.Class({
             GLib.source_remove(this._messageQueueTimeoutId);
             this._messageQueueTimeoutId = 0;
         }
-        this.emit('show-message', null, null);
+        this.emit('show-message', null, MessageType.NONE);
     },
 
     _checkForFingerprintReader: function() {
@@ -295,7 +303,7 @@ const ShellUserVerifier = new Lang.Class({
         logError(error, where);
         this._hold.release();
 
-        this._queueMessage(_("Authentication error"), 'login-dialog-message-warning');
+        this._queueMessage(_("Authentication error"), MessageType.ERROR);
         this._verificationFailed(false);
     },
 
@@ -399,7 +407,7 @@ const ShellUserVerifier = new Lang.Class({
 
     _onInfo: function(client, serviceName, info) {
         if (this.serviceIsForeground(serviceName)) {
-            this._queueMessage(info, 'login-dialog-message-info');
+            this._queueMessage(info, MessageType.INFO);
         } else if (serviceName == FINGERPRINT_SERVICE_NAME &&
             this._haveFingerprintReader) {
             // We don't show fingerprint messages directly since it's
@@ -408,7 +416,7 @@ const ShellUserVerifier = new Lang.Class({
 
             // Translators: this message is shown below the password entry field
             // to indicate the user can swipe their finger instead
-            this.emit('show-login-hint', _("(or swipe finger)"));
+            this._queueMessage(_("(or swipe finger)"), MessageType.HINT);
         }
     },
 
@@ -416,7 +424,7 @@ const ShellUserVerifier = new Lang.Class({
         if (!this.serviceIsForeground(serviceName))
             return;
 
-        this._queueMessage(problem, 'login-dialog-message-warning');
+        this._queueMessage(problem, MessageType.ERROR);
     },
 
     _onInfoQuery: function(client, serviceName, question) {
@@ -496,8 +504,6 @@ const ShellUserVerifier = new Lang.Class({
         if (this.serviceIsForeground(serviceName)) {
             this._verificationFailed(true);
         }
-
-        this.emit('hide-login-hint');
     },
 });
 Signals.addSignalMethods(ShellUserVerifier.prototype);